<template>
    <el-aside id="sidebar" class="bg-dark" :width="sidwidth">
        <el-menu
       :collapse="mode"
      :default-active="key"
      :router=true
      background-color="#343a40"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item :index="key" id="sq"  @click="mode = !mode">
          <i :class="title" ></i>
      </el-menu-item>
      <el-menu-item index="home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="1" v-for="(v, i) in navs" :key="i"  >
        <template slot="title">
          <i :class="v.icon"></i>
          <span v-text="v.title"></span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="(vo, io) in v.child" :key="io" :index="vo.name">
              <i :class="vo.icon"></i>
        <span slot="title" v-text="vo.title"></span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
    </el-aside>
</template>

<script>
export default {
  name: "left1",
  data() {
    return {
      mode: false,
      sidwidth: "200px",
      title: "iconfont icon-menu",
      key: "home",
      navs: [
        {
          name: "course1",
          title: "课程",
          icon: "icon iconfont icon-menu",
          child: [
            {
              name: "course1",
              title: "查看课程",
              icon: "icon iconfont icon-menu"
            },
            {
              name: "addCourse",
              title: "添加课程",
              icon: "icon iconfont icon-menu"
            },
            {
              name: "course1",
              title: "查看课程",
              icon: "icon iconfont icon-menu"
            },
            {
              name: "course1",
              title: "查看课程",
              icon: "icon iconfont icon-menu"
            }
          ]
        }
      ]
    };
  },
  watch: {
    mode(v) {
      if (v) {
        this.sidwidth = "64px";
        this.title = "iconfont icon-pause";
      } else {
        this.sidwidth = "200px";
        this.title = "iconfont icon-menu";
      }
    },
    $route: "fetchData"
  },
  mounted() {
    if (window.innerWidth < 700) {
      this.mode = true;
    }
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.key = this.$router.history.current.name;
    }
  }
};
</script>

<style scoped>
.icon {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
  display: inline-block;
}

#sq {
  height: 30px;
  background: #000;
  line-height: 30px;
}

#sq i {
  display: block;
  text-align: center;
}

#sidebar .el-menu-item:hover {
  background-color: rgba(25, 27, 47, 0.7);
  color: #ffffff;
}
#sidebar .el-menu-item:focus {
  background-color: #191b2e;
}
#sidebar .el-menu-item {
  color: #b2b4c4;
}
</style>
